<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Armageddon: Asteroids Invaders</title>
        <script src="scripts/armageddon.js"></script>
        <style type="text/css">
            body
            {
                font-family: Segoe UI Light, Arial, Helvetica;
                font-size: 1.1em;
                background-color: #eeeeff;
                color: #000;
                margin: 0;
            }

            .title
            {
                font-size: 1.75em;
                text-align: center;
                text-shadow: 1px 1px 3px rgba(55,55,55, .5);
            }
            
            .subtitle
            {
                font-size: 1.2em;
                text-align: center;
            }

            .box-shadow
            {
                -moz-box-shadow: 3px 3px 6px #222;
                -webkit-box-shadow: 3px 3px 6px #222;
                box-shadow: 3px 3px 6px #222;
            }

            canvas
            {
                background-color: #000;
                border: 1px solid #888;
                margin-left: 15px;
            }

            .info
            {
                text-align: left;
                display: inline-block;
                vertical-align: top;
                margin-left: 0.5em;
                margin-right: 0.5em;
            }

            .heading
            {
                font-size: 1.2em;
                text-shadow: 1px 1px 3px rgba(55,55,55, .5);
            }

        </style>
    </head>
    <body>
        <p class="title">Armageddon: Asteroids Invaders</p>
        <div class="info">
            <p class="heading">Instructions:</p>
            <p>Earn points by destroying the asteroids.</p>
            <p>Lose points by letting them slip away.</p>
            <p>Gain an extra life every 10,000 points.</p>
            <p class="heading">Keys:</p>
            <p>Use the arrow keys to move.</p>
            <p>Hold the space bar to shoot.</p>
            <p>ESC to pause.</p>
            <p class="heading">A game by Yonatan Erez</p>
        </div>
        <canvas class="box-shadow" id="canvas" width="500" height="500"></canvas>
    </body>
</html>